<template>
  <div id="body">
    <h2>select v-model绑定对象</h2>
    <div>
      <el-select v-model="selectObject.value" placeholder="请选择" @change="handChange" value-key="id">
        <el-option v-for="item in selectObject.options" :key="item.id" :label="item.label" :value="item">
        </el-option>
      </el-select>
    </div>
    <div>select的value为object时，value-key默认为value</div>
    <div>{{JSON.stringify(selectObject.value)}}</div>

    <el-divider></el-divider>

    <h2>selectTree。大数据量时，selectTree的搜索效率很慢，要分开。搜索和展示分开</h2>
    <div>
      <!-- sync是为了父子组件的属性双向绑定 -->
      <SelectTree :treeData="selectTree.treeData" :selectValue.sync="selectTree.value" :selectLabel.sync="selectTree.label"></SelectTree>
    </div>
    <div>{{selectTree.value}}</div>
    <div>{{selectTree.label}}</div>

  </div>
</template>

<script>
import treeData from '@/common/apiData/treeData.json'
import SelectTree from '@/components/selectTree/SelectTree'

export default {
  components: {
    SelectTree
  },
  data () {
    return {
      // select绑定对象
      selectObject: {
        value: '',
        options: [
          { id: '1', value: '选项1', label: '黄金糕', text: '黄金糕' },
          { id: '2', value: '选项2', label: '双皮奶', text: '双皮奶' },
          { id: '3', value: '选项3', label: '蚵仔煎', text: '蚵仔煎' },
          { id: '4', value: '选项3', label: '蚵仔煎', text: '蚵仔煎' }
        ]
      },
      // selectTree
      selectTree: {
        // 可以回显
        label: '人事变动事件',
        value: 'com.trs.object.tietou.rsbdsj',
        // label: '',
        // value: '',
        treeData: treeData,
      }

    }
  },
  methods: {
    // select绑定对象
    handChange (value) {
      console.log(value)
    },
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>
#body {
  height: 2000px;
}
div {
  margin: 20px 0;
}
</style>